<!--
 * @Descripttion: 组织机构管理
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-21 14:23:40
 * @LastEditors: 穆宏宇
 * @LastEditTime: 2020-11-18 18:43:30
-->
<template>
	<div class="organization">
		<el-row :gutter="10">
			<el-col :span="4">
				<el-card class="box-card box-card-tree" :body-style="{ overflowY: 'auto', height: '95%' }">
					<div slot="header" class="clearfix">
						<i class="el-icon-menu orgIcon"></i>
						<span>组织机构</span>
						<!-- <el-button style="float: right; padding: 3px 0" type="text">操作</el-button> -->
						<el-input style="margin-top: 10px;" v-model="filterText" placeholder="搜索" clearable></el-input>
					</div>
					<!--                      lazy
            :load="loadNode"-->
					<el-tree ref="space" :data="treeData" node-key="id" :check-on-click-node="true"
						:expand-on-click-node="false" :props="defaultProps" :filter-node-method="filterNode"
						default-expand-all @node-click="changeTree">
						<span class="custom-tree-node" slot-scope="{ node }">
							<el-tooltip class="item" effect="dark" :content="node.label" placement="top-start">
								<span>{{ node.label }}</span>
							</el-tooltip>
						</span>
					</el-tree>
				</el-card>
			</el-col>
			<el-col :span="20">
				<el-card class="box-card">
					<div slot="header" class="clearfix">
						<i class="el-icon-menu orgIcon"></i>
						<span>机构管理</span>
						<!-- <el-button style="float: right" type="primary" size="mini" @click="handleOpen('add')"
              >新增</el-button
            > -->
					</div>
					<e-table :data="treeDataTable" :columns="columns" border row-key="id" lazy :load="loadTableNode"
						style="width: 100%" :highlight-current="true" :expand-on-click-node="false" :pageShow="false"
						:tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
						<template slot-scope="{ scope }" slot="operation">
							<el-tooltip content="编辑" placement="top">
								<el-button icon="el-icon-edit" size="mini" @click="handleOpen('edit', scope.row)">
								</el-button>
							</el-tooltip>
							<el-tooltip content="删除" placement="top">
								<el-button icon="el-icon-delete" size="mini" @click="deleteOrgFn(scope.row)">
								</el-button>
							</el-tooltip>
							<el-tooltip content="添加" placement="top">
								<el-button icon="el-icon-plus" size="mini" @click="handleOpen('add', scope.row)">
								</el-button>
							</el-tooltip>
							<el-tooltip content="绘制审批" placement="top">
								<el-button icon="el-icon-warning-outline" size="mini" @click="goActiviti(scope.row)">
								</el-button>
							</el-tooltip>
						</template>
					</e-table>
				</el-card>
			</el-col>
		</el-row>
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false"
			:close-on-press-escape="false">
			<el-form :label-position="'right'" :rules="rules" label-width="120px" :model="form" label-suffix=":"
				ref="form">
				<el-row>
					<el-col :span="12">
						<el-form-item label="上级机构" v-if="parentName">
							{{ parentName }}
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="机构名称" prop="name">
							<el-input v-model="form.name"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="电话号码" prop="tel">
							<el-input v-model="form.tel"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="单位地址">
							<el-input v-model="form.addr"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12" v-if="form.organizationCode">
						<el-form-item label="组织机构编码">
							<el-input v-model="form.organizationCode"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="排序">
							<el-input-number v-model="form.sortValue"
								onKeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)))" :controls="false"
								:max="999999"></el-input-number>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="描述">
							<el-input v-model="form.describe"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="是否需要审批">
							<el-radio-group v-model="form.sfxysp">
								<el-radio label="1">是</el-radio>
								<el-radio label="0">否</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
					<el-col :span="12">
						<el-form-item label="结算方式">
							<el-radio-group v-model="form.settlementMethod">
								<el-radio label="1">未税结算</el-radio>
								<el-radio label="2">含税结算</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<!-- todo 显示供应商信息 -->
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">关 闭</el-button>
				<el-button type="primary" @click="handleSubmit">保 存</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import columns from './columns'
	import {
		getOrgTreeLazy,
		createOrg,
		deleteOrg,
		getOrgTree
	} from '@/api/admin.api'

	import {
		checkPhone
	} from '@/validations/validate'
	import {
		createUuid
	} from '@/util/common'
	export default {
		name: 'organization',
		data() {
			return {
				uuid: '',
				columns,
				// 左侧树
				treeData: [],
				// 右侧树
				treeDataTable: [],
				defaultProps: {
					children: 'children',
					label: 'name',
					isLeaf: 'leaf'
				},
				// 分页数据
				pageData: {
					// 当前分页
					pageNum: 1,
					// 分页条数
					pageSize: 10,
					// 数据总数
					total: 0,
				},
				// 表格选中数据
				tableSelectData: [],
				// 显示弹窗
				dialogVisible: false,
				// 弹窗类型 add 新增 ；edit 查看|编辑
				type: 'add',
				// 弹窗标题
				dialogTitle: '',
				// 弹窗中表单数据
				form: {},
				// 上级父级
				parentName: '',
				rules: {
					name: [{
						required: true,
						trigger: 'blur',
						message: '机构名称不能为空'
					}, ],
					tel: [{
							required: true,
							trigger: 'blur',
							message: '电话号码不能为空'
						},
						{
							validator: checkPhone,
							trigger: 'blur'
						},
					],
				},
				filterText: ''
			}
		},
		watch: {
			filterText(val) {
				this.$refs.space.filter(val)
			}
		},
		created() {
			this.getOrgTreeEvent()
		},
		methods: {

			goActiviti(row) {
				localStorage.setItem("type", 0);
				this.$router.push({
					path: "/activiti?type=0&deptId=" + row.id
				})
			},
			// 获取组织树
			getOrgTreeEvent() {
				getOrgTreeLazy('0').then((res) => {
					this.treeDataTable = res
				})

				getOrgTree('0').then(res => {
					this.treeData = res
				})
			},
			// 组织机构节点数据
			loadNode(node, resolve) {
				if (node.level === 0) {
					getOrgTreeLazy('0').then((res) => {
						res.forEach(item => {
							// 检查是否有叶子节点
							item['leaf'] = !item.hasChildren
						})
						return resolve(res)
					})
				} else if (node.data.hasChildren) {
					getOrgTreeLazy(node.data.id).then((res) => {
						res.forEach(item => {
							// 检查是否有叶子节点
							item['leaf'] = !item.hasChildren
						})
						return resolve(res)
					})
				} else {
					return resolve([])
				}


			},
			// 表格展开树形数据子节点
			loadTableNode(tree, treeNode, resolve) {
				if (tree.hasChildren) {
					getOrgTreeLazy(tree.id).then((res) => {
						return resolve(res)
					})
				} else {
					return resolve([])
				}
			},
			// 打开弹窗 查详情
			handleOpen(type, row) {
				var that = this;
				this.uuid = createUuid()
				this.type = type
				if (type === 'add') {
					this.dialogTitle = '添加组织'
					const {
						name,
						id
					} = row
					this.form = {
						parentId: id
					}
					this.parentName = name
				} else {
					this.parentName = ''
					this.dialogTitle = '编辑|查询组织'
					const {
						name,
						tel,
						addr,
						organizationCode,
						sortValue,
						describe,
						parentId,
						id,
						sfxysp,
						settlementMethod
					} = row
					this.form = {
						name,
						tel,
						addr,
						organizationCode,
						sortValue,
						describe,
						id,
						parentId,
						sfxysp,
						settlementMethod
					}
				}

				this.dialogVisible = true
			},
			// 确定
			handleSubmit() {
				var data = this.form;
				this.$refs.form.validate((valid) => {
					if (valid) {
						createOrg(this.form, this.uuid).then((res) => {
							var type = 'success';
							var msg = this.type == 'add' ? '添加成功！' : '保存成功'
							if(res == '有流程定义需要删除！' || res == '有未处理的审批流程！'){
								msg = res;
								type = 'error'
							}
							
							this.$alert(msg, '提示', {
								confirmButtonText: '确定',
								type: type,
								callback: (action) => {
									this.dialogVisible = false
									// this.getOrgTreeEvent()
									if(res != '有流程定义需要删除！' || res != '有未处理的审批流程！'){
										location.reload();
									}
								},
							})
						})
					}
				})
			},
			// 删除组织
			deleteOrgFn(row) {
				this.$confirm('确定删除此组织吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning',
				}).then(() => {
					const {
						id
					} = row
					deleteOrg(id).then((res) => {
						this.$message({
							message: '删除成功',
							type: 'success',
						})
						this.getOrgTreeEvent()
					})
				})
			},
			// 关闭弹窗
			handleClose(data) {
				console.log(data)
			},
			//表格最大高度
			tableMaxHeight() {
				return window.innerHeight - 160
			},
			// 左侧树点击
			changeTree(item) {
				this.treeDataTable = [item]
			},
			//优化之后的代码 不管有几级都可以适用,不过用了递归
			filterNode(value, data, node) {
				console.log(value, data, node)
				if (!value) {
					return true
				}
				let _array = [] //这里使用数组存储 只是为了存储值。
				this.getReturnNode(node, _array, value)
				let result = false
				_array.forEach(item => {
					result = result || item
				})
				return result
			},
			getReturnNode(node, _array, value) {
				let isPass = node && node.label && node.label.indexOf(value) !== -1
				isPass ? _array.push(isPass) : ''
				if (!isPass && node.level != 1 && node.parent) {
					this.getReturnNode(node.parent, _array, value)
				}
			}
		}
	}
</script>

<style scoped lang='scss'>
	.organization {
		.box-card {
			height: calc(100vh - 120px);
		}

		.orgIcon {
			padding-right: 6px;
			color: $--color-primary;
		}

		.e-search-box .e-search-form {
			padding-right: 0;
		}
	}
</style>

<style lang="scss" scoped>
	.is-current {
		&>.el-tree-node__content {
			color: #fff;
			background: $--color-primary !important;
		}
	}

	.el-tree-node__children {
		background: #fff !important;
	}

	.el-tree-node__content:hover {
		background: rgba(0, 0, 0, 0.1);
	}

	.organization {
		.el-input-number {
			width: 100%;

			.el-input__inner {
				text-align: left;
			}
		}

		.box-card-tree {
			.el-card__body {
				height: calc(100% - 100px);
			}
		}

		th,
		td,
		tr {
			text-align: left !important;
		}
	}

	::v-deep .el-tree>.el-tree-node {
		min-width: 100%;
		display: inline-block;
		overflow: auto;
	}
</style>
<style lang="css">
	.el-tooltip__popper,
	.el-tooltip__popper.is-dark {
		background: #FFFFFF;
		max-width: 400px;
		border-radius: 4px;
		border: 1px solid #e6ebf5;
		padding: 12px;
		color: black;
		line-height: 180%;
		-webkit-box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	}

	.el-tooltip__popper[x-placement^=top] .popper__arrow {
		bottom: -6px;
		left: 50%;
		margin-right: 3px;
		border-top-color: #FFFFFF;
		border-bottom-width: 0;
		-webkit-filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.1));
		filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
	}

	.el-tooltip__popper[x-placement^=top] .popper__arrow:after {
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border-color: transparent;
		border-style: solid;
	}
</style>
